<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!--为了不让table表格样式覆盖-->
    <style>
        .layui-table-cell {
            overflow: visible;
        }

        .layui-table-box {
            overflow: visible;
        }

        .layui-table-body {
            overflow: visible;
        }

        /* 调整高度 */
        td .layui-form-select {
            margin-top: -10px;
            margin-left: -15px;
            margin-right: -15px;
        }
    </style>
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="下单时间" name="createtime" id="start"></div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="支付时间" name="paytime" id="end"></div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <select name="state">
                                <option value="">订单状态</option>
                                <option value="0">待付款</option>
                                <option value="1">已完成</option>
                                <option value="-1">已取消</option>
                            </select>
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <label>用户选择</label>
                            <select name="userid" lay-search="">

                            </select>
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <input type="text" name="ordersid" placeholder="请输入订单号" autocomplete="off"
                                   class="layui-input"></div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="sreach">
                                <i class="layui-icon">&#xe615;</i>
                            </button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn" onclick="xadmin.open('添加用户','./order-add.html',800,600)">
                        <i class="layui-icon"></i>添加
                    </button>
                </div>
                <div class="layui-card-body ">
                    <table id="orderlist" class="layui-table" lay-filter="test"></table>
                </div>
            </div>

        </div>
    </div>
</div>
</div>
<!--模板  -->
<script type="text/html" id="model-createTime">
    <input value="{{d.createtime}}" orderid="{{d.id}}" class="layui-input" placeholder="创建时间" name="createtime">
</script>
<script type="text/html" id="model-payTime">
    <input value="{{d.paytime == undefined ? '':d.paytime}}" orderid="{{d.id}}" class="layui-input" placeholder="未支付"
           name="paytime">
</script>
<!--右侧工具-->
<script type="text/html" id="model-info">
    <button onclick="xadmin.open('编辑','/lengmou/order/info?ordersid={{d.id}}',1000,600)" type="button"
            class="layui-btn">
        <i class="iconfont">&#xe699;</i> 详情
    </button>
</script>
<script type="text/html" id="toolbarDemo">
    <button class="layui-btn layui-btn-danger" lay-event ="deleteAll">
        <i class="layui-icon"></i>批量删除
    </button>
</script>
<script type="text/html" id="model-usersid">
    <select  name="userid" data-value="{{d.userid}}" lay-filter="cars-userid" infoid="{{d.id}}" lay-search="">

    </select>
</script>
<!--订单状态下拉列表框-->
<script type="text/html" id="model-state">
    <select orderstate="{{d.state}}" orderid="{{d.id}}" lay-filter="order-state" name="accert">
        <option style="color: #FFB900" {{d.state== 0 ?
        'selected' :''}} value="0">待付款</option>
        <option style="color: #4dff24" {{d.state== 1 ?
        'selected' :''}} value="1">已完成</option>
        <option style="color: #ff111f" {{d.state== -1 ?
        'selected' :''}} value="-1">已取消</option>
    </select>
</script>

<script>
    layui.use('table', function () {
        var table = layui.table;
        var usersOptions="";
        //此处关闭异步加载：有时候还没有加载完毕表格就已经渲染完毕了，所以需要同步加载
        $.ajaxSettings.async = false;
        $.post(
            "/lengmou/iuu/jsonUsers",
            function (data) {
                var users = data.users;
                for(var index in users){
                    usersOptions+='<option value = "' + users[index].id + '">' + users[index].username + '</option>\n';
                }
            },"json"
        );
        $.ajaxSettings.async = true;
        //第一个实例
        table.render({
            elem: '#orderlist'
            ,toolbar: '#toolbarDemo'
            , url: '/lengmou/order/allOrders' //数据接口
            , method: 'post'
            , page: true //开启分页
            , cols: [[ //表头

                {field: 'id', type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 80, sort: true}
                , {field: 'userid', title: '所属用户',templet:'#model-usersid'}
                , {field: 'createtime', title: '下单时间', sort: true, templet: '#model-createTime'}
                , {field: 'paytime', title: '支付时间', templet: '#model-payTime'}
                , {field: 'remarks', title: '订单备注', edit: 'text'}
                , {field: 'state', title: '订单状态', templet: '#model-state'}
                , {title: '订单操作', toolbar: '#model-info'}
            ]]
            , request: {pageName: 'pageNum', limitName: 'pageSize'}
            , done: function (res, curr, count) {
                var laydate = layui.laydate;
                $("select[name='userid']").html(usersOptions);
                layui.each($("select[name='userid']"), function (index, item) {
                    var elem = $(item);
                    console.log(elem.html());
                    elem.val(elem.data('value'));
                });
                layui.form.render();
                $("input[name='createtime']").each(function () {
                    var $this = $(this);
                    laydate.render({
                        elem: this //渲染当前元素
                        , format: 'yyyy/MM/dd HH:mm:ss'//时间类型
                        , btns: ['confirm']//确认按钮
                        , type: 'datetime'
                        , done: function (value, date, endDate) {
                            if (value != $this.val()) {
                                layer.confirm("您确定要修改该订单的时间吗？", {icon: 3, title: '提示'}, function (index) {
                                    $.post(
                                        "/lengmou/order/setCreatetime",
                                        {
                                            ordersid: $this.attr("orderid"),
                                            createtime: value
                                        }, function (data) {
                                            if (data.state > 0) {
                                                layer.msg("修改成功");
                                            } else if (data.state == -1) {
                                                layer.msg("该订单不存在");
                                            } else {
                                                layer.msg("修改失败，请检查网络后再试");
                                            }
                                        }, "json"
                                    );
                                    layer.close(index);
                                }, function (index) {
                                    location.reload();
                                });
                            }
                        }
                    });
                });
                $("input[name='paytime']").each(function () {
                    var $this = $(this);
                    laydate.render({
                        elem: this //渲染当前元素
                        , format: 'yyyy/MM/dd HH:mm:ss'//时间类型
                        , btns: ['confirm']//确认按钮
                        , type: 'datetime'
                        , done: function (value, date, endDate) {
                            if (value != $this.val()) {
                                layer.confirm("您确定要修改该订单的时间吗？", {icon: 3, title: '提示'}, function (index) {
                                    $.post(
                                        "/lengmou/order/setPaytime",
                                        {
                                            ordersid: $this.attr("orderid"),
                                            paytime: value
                                        }, function (data) {
                                            if (data.state > 0) {
                                                layer.msg("修改成功");
                                            } else if (data.state == -1) {
                                                layer.msg("该订单不存在");
                                            } else {
                                                layer.msg("修改失败，请检查网络后再试");
                                            }
                                        }, "json"
                                    );
                                    layer.close(index);
                                }, function (index) {
                                    location.reload();
                                });
                            }
                        }
                    });
                });


            }
        });

        table.on('edit(test)', function (obj) {
            var value = obj.value, //得到修改后的值
                data = obj.data //得到所在行所有键值
                ,
                field = obj.field; //得到字段
            layer.confirm('您确定修改订单：' + data.id + '吗？', {icon: 3, title: '提示'}, function (index) {
                    $.post(
                        "/lengmou/order/updata",
                        {
                            id: data.id,
                            userid: data.userid,
                            remarks: data.remarks
                        }, function (data) {
                            if (data.state > 0) {
                                layer.msg("修改成功");
                            } else if (data.state == -1) {
                                layer.msg("修改失败，该用户不存在");
                            } else {
                                ayer.msg("修改失败");
                            }
                        }, "json"
                    );
                }
            );
        });

        table.on('toolbar(test)',
            function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'deleteAll':
                        var data = checkStatus.data;
                        var test = JSON.stringify(data);
                        layer.confirm('您确定要删除您选中的这' + data.length + '个订单吗？注意：该操作会删除附属订单详情', {icon: 3, title: '提示'}, function (index) {
                            $.ajax(
                                {
                                    type: 'POST',
                                    url: '/lengmou/order/deleteAll',
                                    contentType: "application/json; charset=utf-8",
                                    data: test,
                                    dataType: 'json',
                                    success: function (data) {
                                        if (data.state > 0) {
                                            layer.alert("操作成功", function () {
                                                location.reload();
                                            });
                                        } else if (data.state == -1) {
                                            layer.alert("操作失败，参数错误");
                                        }
                                    }
                                }
                            );
                            layer.close(index);

                        }, function (index) {
                            layer.close(index);
                        });
                        break;
                }
                ;
            });
    });
</script>
</body>

<script>layui.use(['laydate', 'form'],
    function () {
        var laydate = layui.laydate;
        var form = layui.form;


        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
            , format: 'yyyy/MM/dd HH:mm:ss'//时间类型
            , btns: ['confirm']//确认按钮
            , type: 'datetime'
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
            , format: 'yyyy/MM/dd HH:mm:ss'//时间类型
            , btns: ['confirm']//确认按钮
            , type: 'datetime'
        });
        form.on('submit(sreach)', function (data) {
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            var table = layui.table;
            table.reload('orderlist', {
                url: '/lengmou/order/allOrders',
                method: 'post',
                where: { //设定异步数据接口的额外参数，任意设
                    id: data.field.ordersid,
                    createtime: data.field.createtime,
                    paytime: data.field.paytime,
                    state: data.field.state,
                    userid:data.field.userid
                }
                , page: true
                , id: 'orderlist'
            });
            //只重载数据
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        form.on('select(order-state)', function (data) {
            var orderid = data.elem.attributes['orderid'].nodeValue;
            var state = data.elem.attributes['orderstate'].nodeValue;
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            if (state != data.value) {
                layer.confirm("您确定要修改该订单的状态吗？", {icon: 3, title: '提示'}, function (index) {
                    $.post(
                        "/lengmou/order/setOrderState",
                        {
                            id: orderid,
                            state: data.value
                        }, function (data) {
                            if (data.state > 0) {
                                layer.msg("修改成功");
                            } else {
                                layer.msg("修改失败")
                            }
                        }, "json"
                    );
                }, function (index) {
                    location.reload();
                });
            }
        });
        form.on('select(cars-userid)', function (data) {
            var orderid = data.elem.attributes['infoid'].nodeValue;
            var state = data.elem.attributes['data-value'].nodeValue;
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            if (state != data.value) {
                layer.confirm("您确定要修改该订单的用户吗？", {icon: 3, title: '提示'}, function (index) {
                    $.post(
                        "/lengmou/order/setOrderUserid",
                        {
                            id: orderid,
                            userid: data.value
                        }, function (data) {
                            if (data.state > 0) {
                                layer.msg("修改成功");
                            } else {
                                layer.msg("修改失败")
                            }
                        }, "json"
                    );
                }, function (index) {
                    location.reload();
                });
            }
        });
    });


/*用户-停用*/
function member_stop(obj, id) {
    layer.confirm('确认要停用吗？',
        function (index) {

            if ($(obj).attr('title') == '启用') {

                //发异步把用户状态进行更改
                $(obj).attr('title', '停用');
                $(obj).find('i').html('&#xe62f;');

                $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                layer.msg('已停用!', {
                    icon: 5,
                    time: 1000
                });

            } else {
                $(obj).attr('title', '启用');
                $(obj).find('i').html('&#xe601;');

                $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                layer.msg('已启用!', {
                    icon: 5,
                    time: 1000
                });
            }

        });
}

/*用户-删除*/
function member_del(obj, id) {
    layer.confirm('确认要删除吗？',
        function (index) {
            //发异步删除数据
            $(obj).parents("tr").remove();
            layer.msg('已删除!', {
                icon: 1,
                time: 1000
            });
        });
}

function delAll(argument) {

    var data = tableCheck.getData();

    layer.confirm('确认要删除吗？' + data,
        function (index) {
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {
                icon: 1
            });
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
}</script>

</html>